<template>
  <div class="class-list">
    <div class="class-title">{{ title }}</div>
    <div class="class-item" v-for="(item, index) in menu" :key="index">
      <!--  -->
      <div
        class="name"
        :class="{ active: $route.path === item.url }"
        @click="clickMenu(item)"
      >
        {{ item.name }}
        <i
          v-if="item.sub && item.sub.length"
          :class="{ hide: item.hide }"
          class="el-icon-caret-bottom"
        ></i>
      </div>
      <div
        v-if="item.sub && item.sub.length"
        class="sub"
        :class="{ hide: item.hide }"
        :style="{ height: 37 * item.sub.length + 'px' }"
      >
        <div
          class="name"
          :class="{ active: $route.path === subitem.url }"
          v-for="(subitem, subindex) in item.sub"
          :key="subindex"
          @click="jumpPage(subitem.url)"
        >
          {{ subitem.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassList2",
  props: {
    title: String,
    menu: Array,
  },
  data() {
    return {
      showSub: true,
    };
  },
  methods: {
    clickMenu(item) {
      if (item.sub) {
        item.hide = !item.hide;
      } else {
        this.jumpPage(item.url);
      }
    },
    jumpPage(url) {
      if (!url) {
        return this.$message.info("尚未开放");
      }
      this.$router.push({ path: url });
    },
  },
};
</script>

<style lang="scss" scoped>
.class-list {
  margin-bottom: 20px;
  .class-title {
    height: 44px;
    background: #f3f5f9;
    border-radius: 5px 5px 0px 0px;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  .class-item {
    .name {
      height: 36px;
      background: #ffffff;
      border: 1px solid #f0f0f0;
      border-width: 0 1px 1px 1px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 15px;
      cursor: pointer;
      &.active {
        font-weight: 600;
        color: #d52c1a;
      }
      i {
        transform: rotate(0deg);
        transition: all 0.3s;
        &.hide {
          transform: rotate(90deg);
        }
      }
    }
    .sub {
      transition: height 0.3s;
      overflow: hidden;
      &.hide {
        height: 0px !important;
      }
      .name {
        padding: 0 12px 0 32px;
        color: #666666;
        font-weight: 400;
        &.active {
          font-weight: 600;
          color: #d52c1a;
        }
      }
    }
  }
}
</style>
